<template>
  <el-form
    ref="ruleFormRef"
    class="between-form"
    :model="search"
    :inline="true"
  >
    <div>
        <template v-for="(item,index) in formList" :key="index">
            <el-form-item :label="item.displayName" v-if="item.inputType == 'text'" :prop="item.fieldName">
                <el-input
                    v-model="search[item.fieldName]"
                    :placeholder="'请输入'+item.displayName"
                />
            </el-form-item>
             <el-form-item :label="item.displayName" v-if="item.inputType == 'multi_select' || item.inputType == 'select'" :prop="item.fieldName">
                <el-select
                    v-model="search[item.fieldName]"
                    :placeholder="'请选择'+item.displayName"
                    style="min-width: 120px"
                >
                    <el-option
                        v-for="option in item.options"
                        :key="option.code"
                        :label="option.value"
                        :value="option.code"
                    />
                </el-select>
            </el-form-item>
             <el-form-item :label="item.displayName" v-if="item.inputType == 'date'" :prop="item.fieldName">
                <el-date-picker
                    v-model="search[item.fieldName]"
                    type="date"
                    placeholder="选择日期"
                    style="min-width: 120px"
                    value-format="YYYY-MM-DD"
                />
            </el-form-item>
        </template>
    </div>

    <el-form-item class="nomargin">
      <el-button
        type="primary"
        class="search-btn"
        @click="getTableData(ruleFormRef)"
      >
        查询
      </el-button>
      <el-button @click="reset(ruleFormRef)" class="reset-btn">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { watch } from "vue";

const props = defineProps({
    formList: Array,
});

const emit = defineEmits(['update:modelValue','search']);
let ruleFormRef = ref(null);
let search = reactive({});
watch(() => props.formList, (newVal) => {
    newVal.forEach((item) => {
        search[item.fieldName] = '';
    });
});

watch(search, (newVal) => {
    emit('update:modelValue', newVal);
});

const  reset = (ruleFormRef) => {
    ruleFormRef.resetFields();
    emit('search')
};

const getTableData = (ruleFormRef) => {
    emit('search')
};

</script>
